除了單純的for迴圈以外，還有不同的JS loop方法可以去遍歷陣列、物件，提供了不同的參數選擇方便我們去使用，這樣在取後端傳回的json資料時，會更方便操作! 當取得陣列裡的值，或是物件的key與value，變成我們要的資料類型，將資料顯示在畫面上。我們就來看看還有哪些方法吧。

For in 迴圈遍歷物件

寫法:
我們將語法翻成白話中文來看的話，就是這麼簡單的去遍歷一個物件!

      for (const 變數 in 物件) {
        //要做的事情
      }
      
      for (const key in object) {
        console.log(key)
      }

那遍歷物件的話會怎麼操作呢，for in 的 in 後面會放我們的object(物件)，而左邊的key呢，其實就是我們物件的key值，譬如說 name: 'jason'，name就是我們物件的key值，jason就是我們的value，接下來我們就時計看看例子!

    <p id="demo"></p>

    <script>
      const person = { name: "jason ", year: "2000/", month: "08/", day: "19" };
      let text = "";
      for (const key in person) {
        console.log(person[key]);
        text = text + person[key];
      }
      document.getElementById("demo").innerHTML = text;
    </script>

最後我們將把person物件裡的value顯示在畫面上jason 2000/08/19，而如果今天有需要取key值的需求，也可以用同樣方法取出!這時會有個疑問，那如果今天是要遍歷陣列呢?不是遍歷物件的話，該怎麼做呢?

For in 迴圈遍歷陣列

寫法:
一樣把語法翻成白話來看，就只是把物件變成陣列!

      for (const 變數 in 陣列) {
        //要做的事情
      }
      
      for (const key in Array) {
        console.log(key)
      }

那這時候的key值是甚麼呢?就是陣列的索引值(index)，從0開始。以下是例子。

    <p id="demo"></p>

    <script>
      const name = ["jason", "leo", "dina"];
      let text = "";
      for (const key in name) {
        text = text + name[key] + "</br>";
      }
      document.getElementById("demo").innerHTML = text;
    </script>

除了for迴圈以外，for in 也可以很簡單的將資料一筆一筆给迭帶出來!可不只有一種方法，接下來要介紹的是Array.forEach()!

Array.forEach()

那這跟其他的for迴圈又有甚麼不同呢?forEach在遍歷陣列時，將每個陣列元素都會調用一次函數。而函數可以有三個參數，分別是

1. 項目值
2. 項目的索引index
3. 陣列本身
   白話一點來說呢，就是每個陣列的元素在遍歷時，都會使用這個函數方法!我們來看看實際例子吧!

    <p id="demo"></p>

    <script>
      const name = ["jason", "leo", "dina"];
      let text = "";

      name.forEach(fn);
      function fn(value) {
        text = text + value + "</br>";
      }
      document.getElementById("demo").innerHTML = text;
    </script>

name.forEach(fn)的意思就是forEach去遍歷name陣列裡每一個元素，且調用fn函數方法!那剛剛其他兩個參數，index跟array呢?我們可以把剛剛的例子給改一下。將索引及陣列本身帶進來。

    <p id="demo"></p>

    <script>
      const name = ["jason", "leo", "dina"];
      let text = "";

      name.forEach(fn);
      function fn(value, index, array) {
        text = text + array[index] + "</br>";
      }
      document.getElementById("demo").innerHTML = text;
    </script>

那我們今天的介紹就到這邊了!下一篇將繼續介紹for loop的其他用法~